* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input {
    border: none;
    outline: none;
}
section {
    margin-top: 50px;
    margin-left: 100px;
}
hr {
    margin: 30px 30px 0 30px;
}
.title {
    margin-bottom: 12px;
}

.jianshu-parent {
    width: 150px;
    position: relative;
    transition: 0.5s;
    &:focus-within {
        width: 250px;
        .jianshu-btn {
            filter: invert(100%);
            border-radius: 50%;
            background-color: rgb(134, 134, 134);
        }
    }
    .jianshu-search {
        width: 100%;
        height: 42px;
        background-color: #eee;
        border-radius: 21px;
        padding-left: 20px;
        padding-right: 40px;
        &::placeholder {
            color: #bbb;
        }

        font-size: 16px;
    }

    .jianshu-btn {
        height: 30px;
        width: 30px;
        position: absolute;
        // 50%的作用就是让图片缩小后还是居中的
        background: url(./images/jianshu_searchbar.png) 50% 50% no-repeat;
        background-size: 70% 70%;
        top: 6px;
        right: 8px;
        cursor: pointer; // 光标标成一只手
    }
}

/*百度输入框样式*/
nav {
    width: 100%;
    height: 300px;
    .logo {
        text-align: center;
        img {
            width: 215px;
            height: 110px;
        }
    }
}

.baidu-container {
    width: 512px;
    height: 50px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    min-width: 750px;
    position: relative;
}
.baidu-search {
    width: 550px;
    height: 40px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    border-right: none;
    background: #fff;
    padding-left: 10px;
    color: #222;
    &:hover {
        border-color: #aaa;
    }
    &:focus {
        border-color: rgb(78, 110, 242);
    }
}
.baidu-photo {
    background: url(./images/baidu_photo.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    position: absolute;
    top: 8px;
    right: 160px;
    &:hover {
        background: url(./images/baidu_photo-blue.png) no-repeat;
        background-size: 100% 100%;
        + .photo-text {
            display: block;
        }
    }
}

.photo-text {
    display: none;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    border-radius: 6px;
    height: 32px;
    width: 94px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #626675;
    position: absolute;
    z-index: 2;
    top: 50px;
    right: 120px;
}

.baidu-btn {
    width: 100px;
    height: 40px;
    background-color: rgb(78, 110, 242);
    border-radius: 0 10px 10px 0;
    color: white;
    font-size: 16px;

    &:hover {
        background-color: rgb(64, 99, 240);
    }
}
